<style include="common cros-button-style">
  #wallpaperLabel {
    align-items: center;
    background: none;
    border: none;
    display: flex;
    flex-flow: row nowrap;
    grid-area: label;
    justify-content: space-between;
    margin-top: 12px;
  }

  #container {
    display: grid;
    grid-template-areas:
      '. label .'
      '. image .'
      '. .     .'
      '. theme .'
      '. .     .';
    grid-template-columns: 20px minmax(0, 1fr) 20px;
    grid-template-rows: auto minmax(158px, 220px) 20px 1fr 24px;
    height: 100%;
  }

  #wallpaperLabel > h2 {
    color: var(--cros-text-color-primary);
    display: inline-block;
    font: var(--personalization-app-label-font);
    margin: 12px 0;
  }

  iron-icon[icon='personalization:managed'] {
    --iron-icon-fill-color: var(--cros-icon-color-secondary);
  }

  #wallpaperButton {
    --cr-icon-button-size: 44px;
    /* Make the arrow align with the thumbnail image */
    margin-inline-end: -18px;
  }

  #imageContainer,
  #imagePlaceholder {
    background-color: var(--personalization-app-grid-item-background-color);
    grid-area: image;
    justify-self: center;
    max-width: 360px;
    min-width: 252px;
  }

  ::slotted(personalization-theme) {
    grid-area: theme;
  }

  .photo-images-container {
    background-color: var(--personalization-app-grid-item-background-color);
    border-radius: 12px;
    box-sizing: border-box;
    display: flex;
    flex-flow: row wrap;
    height: 100%;
    justify-content: center;
    /* stop img and gradient-mask from ignoring above border-radius. */
    overflow: hidden;
    position: relative;
    width: 100%;
  }

  .photo-images-container img {
    flex: 1 1 0;
    height: 100%;
    object-fit: cover;
    width: 100%;
  }

  :host-context(body.jelly-enabled) #container {
      grid-template-rows: auto auto 16px auto 20px;
  }

  :host-context(body.jelly-enabled) #imageContainer,
  :host-context(body.jelly-enabled) #imagePlaceholder {
    aspect-ratio: 340/220;
    max-width: 460px;
    min-width: 278px;
  }
</style>
<div class="preview-container" id="container">
  <div id="wallpaperLabel">
    <template is="dom-if" if="[[showPlaceholders_(imageLoading_, image_)]]">
      <h2>$i18n{wallpaperLabel}</h2>
    </template>
    <template is="dom-if" if="[[!showPlaceholders_(imageLoading_, image_)]]">
      <template is="dom-if" if="[[!isPolicyControlled_(image_)]]">
        <h2 on-click="onClickWallpaper_" class="clickable">
          $i18n{wallpaperLabel}
        </h2>
    <cr-icon-button id="wallpaperButton" iron-icon="cr:chevron-right"
        role="button" on-click="onClickWallpaper_"
        class="tast-open-subpage"
        aria-label="$i18n{ariaLabelChangeWallpaper}">
    </cr-icon-button>
      </template>
      <template is="dom-if" if="[[isPolicyControlled_(image_)]]">
        <p>$i18n{wallpaperLabel}</p>
        <iron-icon icon="personalization:managed" title="$i18n{managedSetting}">
        </iron-icon>
      </template>
    </template>
  </div>
  <template is="dom-if" if="[[showPlaceholders_(imageLoading_, image_)]]">
    <div id="imagePlaceholder" class="photo-images-container placeholder"></div>
  </template>
  <template is="dom-if" if="[[!showPlaceholders_(imageLoading_, image_)]]">
    <template is="dom-if" if="[[!isPolicyControlled_(image_)]]">
      <div id="imageContainer" class="photo-images-container clickable"
          on-click="onClickWallpaper_" on-keypress="onClickWallpaper_">
        <div class="photo-images-border"></div>
        <img alt$="[[getImageAltDescription_(image_)]]"
            src$="[[getWallpaperSrc_(image_)]]">
      </div>
    </template>
    <template is="dom-if" if="[[isPolicyControlled_(image_)]]">
      <div id="imageContainer" class="photo-images-container">
        <div class="photo-images-border"></div>
        <img alt$="[[getImageAltDescription_(image_)]]"
            aria-description="$i18n{managedSetting}"
            src$="[[getWallpaperSrc_(image_)]]">
      </div>
    </template>
  </template>
  <slot></slot>
</div>
